<template>
  <div class="h-full w-full flex text-[14px]">
    <!-- 左侧菜单 -->
    <SidebarMenu
      :collapsed="sidebarCollapsed"
      :conversations="conversationsItems"
      :active-key="activeKey"
      @update:collapsed="toggleSidebar"
      @add-conversation="addConversation"
      @conversation-click="onConversationClick"
      @rename-conversation="renameConversation"
      @delete-conversation="deleteConversation"
      @select-conversation="selectConversation"
    />

    <!-- 主体区域 -->
    <div class="h-full w-full box-border flex flex-col gap-4 flex-1 overflow-x-auto scrollBar">
      <!-- 顶部用户栏 -->
      <!-- <ChatHeader /> -->

      <!-- 消息列表 -->
      <ChatMessageList :items="BubbleItems" :roles="roles" />

      <!-- 输入区域 -->
      <ChatSenderBar
        v-model:value="content"
        :loading="requestLoading"
        @submit="onSubmit"
        @cancel="onCancel"
        v-model:scene="curScene"
      />
    </div>
  </div>
</template>

<script setup>
// 子组件
import SidebarMenu from './components/SiderbarMenu/index.vue'
// import ChatHeader from './components/ChatHeader/index.vue'
import ChatMessageList from './components/ChatMessageList/index.vue'
import ChatSenderBar from './components/ChatSenderBar/index.vue'

import { roles } from './config'
import { useSidebar, useConversation, useMessages } from './composables/chat'

const { sidebarCollapsed, toggleSidebar } = useSidebar()
const {
  conversationsItems,
  activeKey,
  isCreatingNewConversation,
  renameConversation,
  deleteCon,
  addCon,
  onConversationClick,
  selectConversation,
} = useConversation()
const {
  messagesMap,
  tempMessages,
  content,
  requestLoading,
  BubbleItems,
  sendMessage,
  cancelMessage,
} = useMessages(activeKey)

const onSubmit = (data) => {
  sendMessage(data, isCreatingNewConversation, conversationsItems)
}

const onCancel = (scene) => {
  console.log('🐯 ~ onCancel ~ scene:', scene)
  cancelMessage(isCreatingNewConversation, scene)
}

const deleteConversation = (key) => {
  deleteCon(key, messagesMap, tempMessages)
}

const curScene = ref('业务知识')
const addConversation = () => {
  addCon(tempMessages, content)
  curScene.value = '业务知识'
}
</script>

<style lang="scss" scoped>
:deep(.ant-btn) {
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.ant-avatar) {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.ant-bubble-lis) {
  gap: 64px !important;
}

:deep(.ant-popover) {
  background-color: red;
}

:deep(.ant-btn-primary) {
  box-shadow: none !important;
}
</style>
